<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>transform-3D</title>
	<style>
	.box{
		width: 300px;
		height: 300px;
		position: relative;
		/* 改变视图 */
		perspective: 1000px;
		margin: 100px auto;
	}
	.box-img, .box-content{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		text-align: center;
		background: rgba(0,0,0,0.7);
		transition: all 0.7s ease;
		color: white;
	}
	.box-img{
		z-index: 100;
	}
		.box1 .box-content{
			transform: rotateY(-90deg) rotateX(0);
			transform-style:preserve-3d;
		}
		.box1:hover .box-content{
			transform: rotateY(0) rotateX(0);
		}
		.box1:hover .box-img{
			transform: rotateY(90deg) rotateX(0);
		}

		.box2:hover .box-img{
			/**
			* 这里是由两次变化叠加而成的，你可以将这个分成两部分去执行
			* 第一部分从原始位置到Y轴的-100%处
			* 第二部分是饶旋转点在X轴方向旋转90度
			*/
			transform: translateY(-100%) rotateX(90deg);
			transform-style: preserve-3d;
			/*这里是以自己元素建立新的坐标
			*	基点会跟着translate移动
			*/
			transform-origin: center bottom 0;
			opacity: 0;
		}
	</style>
</head>
<body>
<div class="box box1">
	<div class="box-img">
		<img src="../../images/4.jpg">
	</div>
	<div class="box-content">
		<h3>这是标题</h3>
		<hr>
		<p>这是一个段落的内容</p>
	</div>
</div>

<div class="box box2">
	<div class="box-img">
		<img src="../../images/4.jpg">
	</div>
	<div class="box-content">
		<h3>这是标题</h3>
			<hr>
			<p>这是一个段落的内容</p>
	</div>
</div>
</div>
</div>
</body>
</html>